<script setup lang="ts">
import { useRouter } from 'vue-router'
import { Position } from '@element-plus/icons-vue'

const router = useRouter()

const props = defineProps({
  info: {
    type: Object,
    required: true,
    default: () => {}
  }
})

// 跳转到详情页
const linkInfo = (id:string) => {
  router.push({
    name: 'SearchInstitutionInfo',
    params: {
      id: id,
    }
  })
}
</script>
<template>
  <div class="search-item" @click="linkInfo(props.info.id)">
    <div class="title-con flex">
      <!-- <img src="@/assets/images/dianxin.jpg" class="img" /> -->
      <div class="title">{{ props.info.name }}</div>
      <jm-icon><Position /></jm-icon>
    </div>
    <div class="content">
      <p>地址:{{ props.info.address }}</p>
      <p>域名:{{ props.info.web }}</p>
    </div>
    <div class="time">{{ props.info.updateTime }}</div>
  </div>
</template>
<style scoped lang="scss">
.search-item {
  cursor: pointer;
}
.title-con {
  align-items: center;
  font-size: 1.25rem;
  font-weight: 700;
  .img {
    width: 2.1875rem;
    height: 2.1875rem;
    margin-right: 0.3125rem;
  }
  .title {
    margin-right: 0.625rem;
  }
}
.content {
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  p {
    margin-bottom: 0.625rem;
    &:last-child {
      margin-bottom: 0;
    }
  }
}
.time {
  margin-top: 1.25rem;
  color: var(--el-color-info);
}
:deep(.highlight) {
  display: inline-block;
  background-color: var(--el-color-danger);
}
</style>
